<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <script src="/layui/jquery-3.5.1.min.js"></script>
    <script src="/layui/layui.js" charset="utf-8"></script>
</head>
<body>

<form class="layui-form layui-form-pane"action="">
    <div class="layui-inline">
        <label class="layui-form-label">评估状态</label>
        <div class="layui-input-inline">
            <select name="modules"  lay-filter="required" lay-search="" id="find">
                <option value="">全部</option>
                <option value="0">已驳回</option>
                <option value="1">进行中</option>
                <option value="2">已完成</option>
            </select>
        </div>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="initiatePurchaseProject">新建采购项目</button>
    </div>
</script>


<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
    {{#  if(d.enable == 1){ }}
    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">风险评估</button>
    {{#  } }}
</script>

<script type="text/html" id="risk">
    {{#  if(d.enable == 0){ }}
    已驳回
    {{#  } }}
    {{#  if(d.enable == 1){ }}
    评估中
    {{#  } }}
    {{#  if(d.enable == 2){ }}
    已完成
    {{#  } }}
</script>

<script type="text/html" id="staff">
  {{d.staff.name}}
</script>
<script>


    layui.use(['table','form'], function(){
        var table = layui.table
        var $ = layui.$;
        var form =layui.form;
        form.on('select(required)', function(data){
            var enable=data.value;//得到被选中的值
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                        enable: enable
                }
            }, 'data');
        })
        table.render({
            elem: '#test'
            ,url:'/purchase/tableList'
            ,title: '数据模板'
            ,toolbar: '#toolbarDemo'//绑定三个按钮
            ,cols: [
                [
                 {field:'number', title:'项目编号'}
                ,{field:'name', title:'项目名称'}
                ,{field:'staff', title:'负责人', templet: '#staff'}
                ,{field:'startTime', title:'开始时间',templet:'<div>{{ layui.util.toDateString(d.startTime, "yyyy-MM-dd") }}</div>'}
                ,{field:'endTime', title:'结束时间',templet:'<div>{{ layui.util.toDateString(d.endTime, "yyyy-MM-dd") }}</div>'}
                ,{field:'enable', title:'风险状态',  templet: '#risk'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]
            ]
            ,id: 'testReload'
            ,page: true
        });

        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'initiatePurchaseProject':
                    window.location = '/purchase/approveInitiatePurchaseProject';
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var id = obj.data.id;

            if(obj.event === 'edit'){
                layer.open({
                    type: 2,
                    area: ['1000px','450px'],
                    content: '/purchase/procurementTemplateDetail?id='+id,
                    btn: ['关闭'],
                    yes: function () {
                        layer.closeAll();
                    },
                    zIndex: layer.zIndex
                });
            }else if(obj.event === 'add'){
                layer.open({
                    type: 2,
                    area: ['800px','400px'],
                    content: '/purchase/addRisk?id='+id,
                    btn: ['关闭'],
                    yes: function () {
                        layer.closeAll();
                    },
                    end:function(){
                     window.location.reload();
                    },
                    zIndex: layer.zIndex
                });
            }
        });
    });
</script>

</body>
</html>